
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: Terms and Conditions</title>

		
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
		
		<!-- load dojo and provide config via data attribute -->
		<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
		<script>
			// Require the Dialog class
			require(["dijit/registry", "dojo/ready", "dijit/Dialog","dijit/form/Button","dijit/form/TextBox"], function(registry, ready){
		
			// Show the dialog
				window.showDialog = function() {
					registry.byId("terms").show();
				}
				// Hide the dialog
				window.hideDialog = function() {
					registry.byId("terms").hide();
				}
				// Force them to provide an answer
				window.doAlert = function() {
					alert("You must agree!");
				}
				ready(function() {
					registry.byId("terms").show();
				})
			});
		</script>
	</head>
	<body class="claro">
		<h1>Demo: Terms and Conditions</h1>

		<button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:showDialog">View Terms and Conditions</button>

		<div class="dijitHidden">
		<div data-dojo-type="dijit.Dialog" style="width:400px;" data-dojo-props="title:'系統登入'" id="terms">
			
				<strong><label for="email" style="display:inline-block;width:100px;">Email:</label></strong>
				<div data-dojo-type="dijit.form.TextBox" id="email"></div>
				<br />
				<strong><label for="pass" style="display:inline-block;width:100px;">Password:</label></strong>
				<div data-dojo-type="dijit.form.TextBox" id="pass"></div>
				<br />
			<button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:hideDialog" style="text-align: center;">Submit</button>

		</div>
		</div>

	</body>
</html>
